<template>
  <div>
    <Field
      :id="name"
      :name="name"
      :placeholder="placeholder"
      :rules="rules"
      :type="type"
      :validate-on-blur="false"
      :validate-on-input="true"
      class="rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
      v-bind="attrs"
    >
      <template #default="{ componentField }">
        <component
          :is="_components(attrs, componentField)"
          v-bind="componentField"
        />
      </template>
    </Field>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

import { Field, type TypedSchema } from 'vee-validate';

import { _components } from './somecomponents.tsx';

defineProps({
  attrs: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  placeholder: {
    type: String,
    required: true,
  },
  rules: {
    type: Object as PropType<TypedSchema<string, string>>,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
});
</script>
